<template>
    <div>
      <textarea :id="id" @keyup="setContent"></textarea>
      <!-- <button class="btn" @click="release">发布文章</button> -->
    </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
//这下面是tinymce的插件
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/media'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/skins/ui/oxide/skin.css'
import 'tinymce/icons/default/icons.min'
import zh from '../../public/tinymce/langs/zh_CN'

export default {
  name:'',
  props:{
    id:String,
    content:{
      default: ''
    },
    jude:{
       default:1
    }
  },
  data () {
    return {
      textContent:'',
      init:{
        selector: '#'+this.id,
        language_url: zh,
        language: 'zh_CN',//语言
        skin_url: '../../public/tinymce/skins/ui/oxide',
        height: 0,
        valid_classes: {
          '*': 'class5', //全局可以拥有的class值
        },
        //插件
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        //工具栏
        toolbar:
            'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        //隐藏tinymce的标识
        branding: false,
        media_live_embeds:true,
        images_upload_handler: (blobInfo, success, failure) => {
          console.log(localStorage.getItem('API'));
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          console.log(img);
          console.log(localStorage.getItem('API'));
         const  request = this.myCode();
          var config = {
              method:'post',
              url:'/BlogUpload',
              data:{
                 'imgUrl':img,
                  'api_token':localStorage.getItem('API'),
              }
          }
          request(config).then(res=>{
            success(res.data.content);
          })

        },
        setup:(editor)=>{
            editor.on('input change undo redo execCommand KeyUp',()=>{
                // console.log(tinymce.get(this.id).getContent());
            })
        }
      }
    };
  },
  methods:{
    release(){
      //content 是文本内容
      let content = tinymce.get(this.id).getContent()
      this.$emit('release',content)
      // 设置内容：tinymce.activeEditor.setContent(“需要设置的编辑器内容”)
    },
    setContent(){
          let context = tinymce.get(this.id).getContent();
    }
  },
  mounted () {
    //配置的初始化
    //  console.log(this.init.height);
       this.init.height=600;
     
      if(this.jude != 2){
     this.init.height =  document.body.clientHeight - (document.getElementsByClassName('BlogHeader')[0].offsetHeight+document.getElementsByClassName('choose')[0].offsetHeight + 30 + document.getElementsByClassName('title')[0].offsetHeight + 25);
      }
   
      tinymce.init(this.init);
      tinymce.get(this.id).setContent(this.content)
   
  },
  watch:{
     content(value){
       this.content = value;
        tinymce.get(this.id).setContent(this.content)
     
     }
  },
  beforeDestroy() {
    //销毁
    tinymce.get(this.id).destroy();
  },
}

</script>
<style scoped>
@import "~tinymce/skins/ui/oxide/skin.css";

 .tox-tinymce{
   height: 1000px !important;
 }
</style>